<template>
	<view id="promotion">
		<view class="promotion-ul">
			<view class="promotion-li">
				<text>推广级别</text>
			</view>
			<view class="promotion-op">
				<radio-group class="type-i" @change="changeValue">
					<radio class="common" checked="true" value="普通推广">普通推广</radio>
					<radio value="置顶推广">置顶推广</radio>
				</radio-group>
			</view>
		</view>
		<view class="promotion-ul">
			<view class="promotion-li">
				<text>信息分类</text>
			</view>
			<view class="promotion-op">
				<picker class="fenlei" range-key="name" :value="index3" :range="fenlei" @change="fenleiIndex">
					{{ fenlei[index3].name }}
				</picker>
			</view>
		</view>
		<view class="promotion-ul">
			<view class="promotion-li">
				<text>推广名称</text>
			</view>
			<view class="model">
				<input type="text" v-model="promotionName" placeholder="如: 拓客桥大数据营销专家" />
			</view>
		</view>
		<view class="promotion-ul">
			<view class="promotion-li">
				<text>联系方式</text>
			</view>
			<view  class="model">
				<input type="text" v-model="contactInformation" placeholder="如: 12547776456" />
			</view>
		</view>
		<view class="promotion-ul-i">
			<view class="promotion-li-i">
				<text>推广图片</text>
			</view>
			<view class="promotion-t">
				<view class="promotion-ti">
					<image class="thumbnail" src="@/static/images/shangchjuan.png" mode="" @click="chooseImg"></image>
					<image  class="xiao" v-for="item in imgArr" :src="item" :key="index"></image>
				</view>
				<view class="promotion-to">
					请上传300*300左右大小的图片
				</view>
			</view>
		</view>
		<view class="promotion-ul-i">
			<view class="promotion-li-i">
				<text>内容描述</text>
			</view>
			<view class="promotion-t model">
				<textarea class="input" placeholder="请输入推广产品/服务内容的描述信息, 不低于30个字" v-model="contentDescription" rows="1" ref="address"></textarea>
			</view>
		</view>
		<view class="promotion-ul">
			<view class="promotion-li">
				<text>置顶权益</text>
			</view>
			<view class="promotion-lo">
				<text>请联系业务经理开通置顶权限</text>
			</view>
		</view>
		<view class="text-bottom">
			<view class="text-top">
				<text class="text">*请上传较为合适的图片或文字信息，以便移动端APP能够快速，流畅访问!</text>
				<br>
				<text class="text">*第一张将作为首页默缩略图；</text>
				<br>
				<text class="text">*发布置顶推广时请确认已开通置顶推广权限，若未开通请联系业务员开通。</text>
				<br>
				<text class="text">*每位拥有权限的用户可发布一篇置顶推广信息，发布新的置顶推广信息会自定将已发布的置顶推广取消。</text>
			</view>
		</view>
		<view class="back"></view>
		<view class="promotion-bottom" @click="confirmRelease">
			<text>确认发布</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}, //个人信息
				fenlei: [],
				index: 0,
				imgArr: [],
				tglevel: '',  //推广级别
				informationClassification: '', //信息分类
				index3: 0,
				fenleiId: '', //信息分类的id
				promotionName: '', //推广名称
				contactInformation: '', //联系方式
				contentDescription: '', //内容描述
			}
		},
		onLoad() {
			console.log(this.fenlei)
			console.log(this.$store.state.userInfo);
			this.userInfo = this.$store.state.userInfo;
		},
		created() {
			this.getInformation();
		},
		methods: {
			// 推广级别
			changeValue(e) {
				this.tglevel = e.target.value; //字符串
			},
			//获取信息分类
			getInformation() {
				this.$post(this.api.indexFenlei).then((res) => {
					console.log(res);
					this.fenlei = res.data;
				}).catch((err) => {
					console.log(err)
				})
			},
			// 信息分类
			fenleiIndex(e) {
				this.index3 = e.detail.value;
				this.fenleiId = this.fenlei[this.index3].id;
			},	
			// 点击图片上传
			chooseImg() {
				uni.chooseImage({
					count: 9,
					success: res => {
						console.log(res)
						this.imgArr = res.tempFilePaths
					}
				})
			},
			
			//确认发布
			confirmRelease() {
				let params = {
					jb: this.tglevel, //级别
					fid: this.fenleiId, //分类id
					tname: this.promotionName, //推广名称
					phone: this.contactInformation, //联系方式
					images: '', //推广图片
					nrms: this.contentDescription, //内容描述
					uid: this.userInfo.user_id, //用户信息
					qid: '18', //区级id
				};
				this.$post(this.api.addjztg, params).then((res) => {
					console.log(res);
					// setTimeout(function() {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		position: 'bottom',
					// 		title: '注册成功'
					// 	});
					// }, 2000)
				}).catch((err) => {
					console.log(err)
				})
			}
		},
	}
</script>

<style lang="less">
	#promotion {
		background-color: #ffffff;
		
		.promotion-ul {
			width: 750rpx;
			border-bottom: 1rpx solid #DBDBDB;
			display: flex;
			align-items: center;
			.promotion-li {
				font-size: 28rpx;
				color: #333333;
				padding: 20rpx 30rpx;
			}
			.model{
				input{
					font-size: 28rpx;
				}
			}

			.promotion-op {
				.type-i {
					width: 450rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000000;
					line-height: 41rpx;
					padding: 20rpx 30rpx;
					.common{
						margin-right: 30rpx;
					}
					/deep/ .uni-radio-input{
						width: 30rpx;
						height: 30rpx;
					}
				}

				.fenlei {
					padding: 20rpx 50rpx;
					font-size: 28rpx;
				}
			}

			input {
				width: 400rpx;
				padding: 20rpx 20rpx;
			}

			.promotion-lo {
				padding: 20rpx 30rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}

		.promotion-ul-i {
			border-bottom: 1rpx solid #DBDBDB;
			height: 176rpx;
			display: flex;

			.promotion-li-i {
				padding: 70rpx 30rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.promotion-t {
				.promotion-ti {
					padding: 10rpx 0;
					.xiao {
						width: 100rpx;
						height: 100rpx;
						margin-left: 10rpx;
					}

					.thumbnail {
						width: 50rpx;
						height: 50rpx;
                        padding: 25rpx 30rpx;
						border: 1rpx solid #EEEEEE;
					}
				}

				.promotion-to {
					height: 50rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #A5A5A5;
					line-height: 41rpx;
				}

				.input {
					height: 120rpx;
					width: 490rpx;
					padding: 20rpx 0;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #A5A5A5;
					line-height: 40rpx;
				}
			}
		}

		.text-bottom {
			padding: 60rpx 30rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
		}

		.back {
			height: 118rpx;
			background: #F6F5F5;
		}

		.promotion-bottom {
			width: 750rpx;
			height: 99rpx;
			background: #5696F8;
			text-align: center;
			line-height: 99rpx;

			text {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 41rpx;
			}
		}
	}
</style>
